.icon.ic-back-top, .icon.ic-normal {
    width: 40px;
    height: 40px
}

.icon {
    display: block
}

.icon.ic-normal {
    background-size: 40px
}

.box.row, .box.row-reverse {
    -webkit-box-orient: horizontal
}

.box-fl, .box-fr {
    -webkit-transition: width .2s
}

.box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.box.row {
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-box-direction: normal
}

.box.row-reverse {
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -webkit-box-direction: reverse
}

.box.column {
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.box.column-reverse {
    flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse
}

.box.wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-lines: multiple
}

.box.nowrap {
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-lines: single
}

.box.flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -ms-flex-pack: end;
    -moz-box-pack: end;
    -webkit-box-pack: end
}

.box.justify {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    -webkit-box-pack: justify
}

.box.around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.vertical {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-grid-row-align: center;
    -ms-flex-align: center;
    align-items: center
}

.baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-grid-row-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.horizontal {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    justify-content: center
}

.horizontal-hack {
    display: table;
    table-layout: fixed
}

.box-fl {
    transition: width .2s;
    -ms-flex-order: 1;
    -webkit-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1
}

.box-fr {
    transition: width .2s;
    -ms-flex-order: 3;
    -webkit-order: 3;
    -webkit-box-ordinal-group: 4;
    order: 3
}

.box-aw {
    min-width: 0;
    -webkit-transition: width .2s;
    transition: width .2s;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -webkit-box-ordinal-group: 3;
    order: 2;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.flex-col {
    min-width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.box-aw img {
    width: 100%;
    max-width: intrinsic;
    max-width: -moz-fit-content;
    max-width: -webkit-fit-content;
    height: auto
}

.box-aw img.auto-width {
    width: auto;
    max-width: none
}

.box-aw img[data-delay] {
    max-width: none
}

.lee-container {
    overflow: hidden;
    width: 100%;
    height: auto;
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    white-space: normal;
    -ms-text-justify: inter-ideograph;
    text-justify: inter-ideograph
}

.lee-container:after {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 0;
    content: ''
}

.lee-container .lee-item {
    display: inline-block;
    margin: 10px auto
}

.align-items-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end
}

.align-self {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -webkit-align-self: center
}

.align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
    -webkit-align-self: flex-start
}

.align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-align-self: flex-end
}

.align-self-baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
    -webkit-align-self: baseline
}

.align-self-stretch {
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    -webkit-align-self: stretch
}

progress, sub, sup {
    vertical-align: baseline
}

button, hr, input {
    overflow: visible
}

*, :after, :before, legend {
    box-sizing: border-box
}

body, figure, ul {
    margin: 0
}

legend, ul {
    padding: 0
}

html {
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    font: 400 16px/1.618 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, sans-serif
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary, svg {
    display: block
}

audio, canvas, progress, video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    text-decoration: none;
    outline: 0
}

a:active, a:hover {
    outline-width: 0
}

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    border-bottom: none
}

b, strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    color: #000;
    background-color: #ff0
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

[type=button], img {
    border: none;
    outline: 0
}

svg:not(:root) {
    overflow: hidden
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

hr {
    box-sizing: content-box;
    height: 0
}

button, input, select, textarea {
    font: inherit;
    margin: 0;
    outline: 0
}

optgroup {
    font-weight: 700
}

button, select {
    text-transform: none
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: ButtonText dotted 1px
}

fieldset {
    margin: 0 2px;
    padding: .35em .625em .75em;
    border: 1px solid silver
}

legend {
    display: table;
    max-width: 100%;
    white-space: normal;
    color: inherit
}

textarea {
    overflow: auto
}

[type=radio], [type=checkbox] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    opacity: .54;
    color: inherit
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

ul {
    list-style: none
}

val, x-foo-define {
    font-size: 0;
    display: none;
    visibility: hidden
}

.sc.body {
    width: 100%;
    min-width: 1200px
}

.sc.sc-bgc {
    background: #f5f5f5
}

.sc .sc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.sc.overh {
    overflow: hidden
}

.sc.sc-text {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: initial;
    word-break: break-all
}

.sc .wrap {
    white-space: normal;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    -ms-word-break: break-all
}

.sc.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.sc .sc-tool-backtop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    width: 41px;
    height: 41px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 1px solid #ddd;
    background: #f5f5f5
}

.sc .sc-tool-backtop:hover .icon {
    margin: -40px 0 0;
    -webkit-transition: all .15s;
    transition: all .15s
}

.sc .sc-tool-backtop .sc-tool-name {
    font-size: 14px;
    line-height: 40px;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #fff;
    background: #3aab4e
}

.sc .hide {
    display: none;
    opacity: 0
}

.sc .show {
    display: block;
    opacity: 1
}

.sc .text-gradient {
    position: relative;
    overflow: hidden
}

.sc .center {
    text-align: center
}

.sc .center .center-layer {
    display: inline-block;
    margin: 0 auto
}

.sc .center .vam {
    vertical-align: middle
}

.cursor {
    cursor: pointer
}

.clear:after {
    font-size: 0;
    display: block;
    visibility: hidden;
    clear: both;
    width: 0;
    height: 0;
    content: '.'
}

.no_more_data_flag {
    font-size: 16px;
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;
    color: #666
}

.noscroll {
    overflow: hidden !important
}

.anchorBL {
    display: none !important
}

.sk-circle {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 20px auto
}

.sk-circle .sk-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.sk-circle .sk-child:before {
    display: block;
    width: 15%;
    height: 15%;
    margin: 0 auto;
    content: '';
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    border-radius: 100%;
    background-color: #333
}

.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg)
}

.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg)
}

.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg)
}

.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg)
}

.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg)
}

.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg)
}

.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg)
}

.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}

.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s
}

@-webkit-keyframes sk-circleBounceDelay {
    0%, 100%, 80% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes sk-circleBounceDelay {
    0%, 100%, 80% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

body [data-aos=zoom-in-up] {
    -webkit-transform: translateY(100px) scale(.94);
    -ms-transform: translateY(100px) scale(.94);
    transform: translateY(100px) scale(.94)
}

.btn-link, .btn-link a {
    color: #31b968
}

.btn-link a:hover, .btn-link:hover {
    color: lighten #31b968
}

.hide {
    display: none;
    opacity: 0
}

.show {
    display: block;
    opacity: 1
}

.btn, .btn a {
    padding: .4rem 1.2rem;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 1px solid transparent;
    border-radius: 2px;
    outline: 0
}

.btn a.block, .btn.block {
    display: block;
    width: 100%
}

.btn a.btn-lg, .btn.btn-lg {
    font-size: 1.125rem
}

.btn a:disabled, .btn:disabled {
    cursor: default;
    opacity: .9
}

.btn a:disabled:not([class~=btn-disabled-green]), .btn:disabled:not([class~=btn-disabled-green]) {
    color: #ccc;
    border-color: #eee;
    background: #f8f8f8
}

.btn-link, .btn-link a {
    padding: 0;
    color: #31b968;
    border: none;
    border-radius: 0
}

.btn-link a:not(:disabled):hover, .btn-link:not(:disabled):hover {
    color: #3bc372
}

.btn-green {
    color: #fff;
    background: #31b968
}

.btn-green:not(:disabled):hover {
    background: #3bc372
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.span-box {
    display: inline-block
}

input:not([type=button]) {
    font-size: .875rem;
    line-height: 1.6;
    padding: 12px 20px;
    -webkit-transition: all .2s;
    transition: all .2s;
    color: #666;
    border: 1px solid #dce4e6;
    border-radius: 3px;
    outline: 0;
    background: #f3f6f8
}

input:not([type=button]):focus {
    color: #666;
    border-color: #31b968;
    background: #eef1f3
}

input:not([type=button]).error {
    color: #666;
    border-color: #e35b5a
}

input:not([type=button])[type=number] {
    -moz-appearance: textfield
}

input:not([type=button]):disabled {
    opacity: .7
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

input::-webkit-input-placeholder {
    color: #aaa
}

input::-moz-placeholder {
    color: #aaa
}

input:-ms-input-placeholder {
    color: #aaa
}

input:-moz-placeholder {
    color: #aaa
}

.form-wrapper .form-tips {
    font-size: .75rem;
    color: #31b968
}

.form-wrapper .form-tips .error, .form-wrapper .form-tips.error {
    color: #e35b5a
}

.form-wrapper .form-tips .error a, .form-wrapper .form-tips.error a {
    padding: 0;
    color: #31b968;
    border: none;
    border-radius: 0
}

.form-wrapper .form-tips .error a:not(:disabled):hover, .form-wrapper .form-tips.error a:not(:disabled):hover {
    color: #3bc372
}

.checkbox-group input {
    display: none;
    opacity: 0
}

.checkbox-group input[type=checkbox] + label, .checkbox-group input[type=radio] + label {
    line-height: 1;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.checkbox-group input[type=checkbox] + label:before, .checkbox-group input[type=radio] + label:before {
    line-height: 1;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    content: '';
    -webkit-transition: all .2s;
    transition: all .2s;
    color: #fff;
    border: 1px solid #dce4e6;
    background-color: #f3f6f8
}

.checkbox-group input[type=checkbox] + label:before {
    border-radius: 3px
}

.checkbox-group input[type=radio] + label:before {
    border-radius: 50%
}

.checkbox-group input[type=checkbox]:checked + label:before, .checkbox-group input[type=radio]:checked + label:before {
    text-align: center;
    color: #fff;
    border-color: #31b968
}

.checkbox-group input[type=checkbox]:checked + label:before {
    content: '\2713';
    background-color: #31b968
}

.checkbox-group input[type=radio]:checked + label:before {
    border-width: 6px;
    background: #fff
}

.ic-svg {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.ic-refresh-green {
    background-image: url(../imgs/icon/ic-refresh-green.svg)
}

.ic-pc-white {
    background-image: url(../imgs/icon/ic-pc-white.svg)
}

.ic-qw-white {
    background-image: url(../imgs/icon/ic-qw-white.svg)
}

.ic-female {
    background-image: url(../imgs/icon/ic-female.svg)
}

.ic-male {
    background-image: url(../imgs/icon/ic-male.svg)
}

.ic-mail {
    background-image: url(../imgs/icon/ic-mail.svg)
}

.ic-mail-green {
    background-image: url(../imgs/icon/ic-mail-green.svg)
}

.ic-phone {
    background-image: url(../imgs/icon/ic-phone.svg)
}

.ic-phone-green {
    background-image: url(../imgs/icon/ic-phone-green.svg)
}

.ic-news-ok {
    background-image: url(../imgs/icon/ic-ok.svg)
}

body {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background: url(../imgs/body-bg.png) center no-repeat fixed;
    background-size: cover
}

body.reg {
    min-height: 850px
}

hr {
    border: none;
    border-top: 1px solid #eee
}

.home-header .logo {
    display: inline-block;
    width: 200px;
    height: 65px;
    margin: 5vh 0 4vh 130px;
    background: url(../imgs/logo-osc-white.svg) no-repeat
}

.home-body-box, .login-body, .logon-body {
    position: relative;
    width: 685px;
    margin: auto;
    padding: 35px 30px;
    color: #666;
    border-radius: 4px;
    background: #fff;
    box-shadow: 1px 1px 4px #767676
}

.home-body-box .login-title, .login-body .login-title, .logon-body .login-title {
    font-size: 1.375rem;
    margin-bottom: 40px
}

.home-body-box input, .login-body input, .logon-body input {
    width: 100%
}

.home-body-box .form-wrapper .form-item, .login-body .form-wrapper .form-item, .logon-body .form-wrapper .form-item {
    position: relative
}

.home-body-box .form-wrapper .form-item.form-box, .login-body .form-wrapper .form-item.form-box, .logon-body .form-wrapper .form-item.form-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.home-body-box .form-wrapper .form-item.form-box .form-label, .login-body .form-wrapper .form-item.form-box .form-label, .logon-body .form-wrapper .form-item.form-box .form-label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none
}

.home-body-box .form-wrapper .form-item.form-box .form-ctrl, .login-body .form-wrapper .form-item.form-box .form-ctrl, .logon-body .form-wrapper .form-item.form-box .form-ctrl {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.home-body-box .form-wrapper .form-item.form-box .form-tips, .login-body .form-wrapper .form-item.form-box .form-tips, .logon-body .form-wrapper .form-item.form-box .form-tips {
    left: 100px
}

.home-body-box .form-wrapper .form-item:not(:last-child), .login-body .form-wrapper .form-item:not(:last-child), .logon-body .form-wrapper .form-item:not(:last-child) {
    margin-bottom: 20px
}

.home-body-box .form-wrapper .form-item .form-tips, .login-body .form-wrapper .form-item .form-tips, .logon-body .form-wrapper .form-item .form-tips {
    position: absolute;
    top: 100%
}

.home-body-box .form-wrapper .form-tips, .login-body .form-wrapper .form-tips, .logon-body .form-wrapper .form-tips {
    line-height: 20px
}

.home-body-box .form-wrapper .v-code.show, .login-body .form-wrapper .v-code.show, .logon-body .form-wrapper .v-code.show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.home-body-box .form-wrapper .form-v-code, .login-body .form-wrapper .form-v-code, .logon-body .form-wrapper .form-v-code {
    line-height: 1;
    width: 120px;
    margin-left: 12px
}

.home-body-box .form-wrapper .form-v-code .ic-svg, .login-body .form-wrapper .form-v-code .ic-svg, .logon-body .form-wrapper .form-v-code .ic-svg {
    width: 21px;
    height: 21px
}

.home-body-box .form-wrapper .form-v-code .v-code-img, .login-body .form-wrapper .form-v-code .v-code-img, .logon-body .form-wrapper .form-v-code .v-code-img {
    height: 100%;
    cursor: pointer;
    border-radius: 3px;
    background: 0 0
}

.home-body-box .form-wrapper .form-v-code .v-code-img:hover, .login-body .form-wrapper .form-v-code .v-code-img:hover, .logon-body .form-wrapper .form-v-code .v-code-img:hover {
    opacity: .8
}

.home-body-box .form-wrapper .form-v-code .v-code-refresh, .login-body .form-wrapper .form-v-code .v-code-refresh, .logon-body .form-wrapper .form-v-code .v-code-refresh {
    cursor: pointer
}

.home-body-box .form-wrapper .form-phone-code, .login-body .form-wrapper .form-phone-code, .logon-body .form-wrapper .form-phone-code {
    font-size: .875rem;
    display: inherit;
    margin-left: 12px
}

.home-body-box .form-wrapper .form-button, .login-body .form-wrapper .form-button, .logon-body .form-wrapper .form-button {
    font-size: 1.25rem
}

.home-body-box .other-login-wrapper, .login-body .other-login-wrapper, .logon-body .other-login-wrapper {
    width: 220px;
    padding-left: 40px;
    border-left: 1px dashed #eee
}

.home-body-box .other-login-wrapper .margin-forty, .login-body .other-login-wrapper .margin-forty, .logon-body .other-login-wrapper .margin-forty {
    display: block;
    margin-bottom: 40px
}

.home-body-box .other-login-wrapper .span-box, .login-body .other-login-wrapper .span-box, .logon-body .other-login-wrapper .span-box {
    display: block
}

.home-body-box .other-login-wrapper .other-login, .login-body .other-login-wrapper .other-login, .logon-body .other-login-wrapper .other-login {
    margin-top: 5px
}

.home-body-box .other-login-wrapper .other-login .login-logo, .login-body .other-login-wrapper .other-login .login-logo, .logon-body .other-login-wrapper .other-login .login-logo {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-right: 20px;
    -webkit-transition: all .2s;
    transition: all .2s
}

.home-body-box .other-login-wrapper .other-login .login-logo svg, .login-body .other-login-wrapper .other-login .login-logo svg, .logon-body .other-login-wrapper .other-login .login-logo svg {
    width: 100%;
    height: 100%
}

.home-body-box .other-login-wrapper .other-login .login-logo:hover, .login-body .other-login-wrapper .other-login .login-logo:hover, .logon-body .other-login-wrapper .other-login .login-logo:hover {
    opacity: .8
}

.home-body-box .tab-item, .login-body .tab-item, .logon-body .tab-item {
    cursor: pointer
}

.home-body-box .tab-item:hover, .login-body .tab-item:hover, .logon-body .tab-item:hover {
    opacity: .8
}

.home-body-box .user-gender, .login-body .user-gender, .logon-body .user-gender {
    padding-bottom: 20px
}

.home-body-box .user-gender .checkbox-group input + label:before, .login-body .user-gender .checkbox-group input + label:before, .logon-body .user-gender .checkbox-group input + label:before {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background: #c9c9c9
}

.home-body-box .user-gender .checkbox-group input:checked + label:before, .login-body .user-gender .checkbox-group input:checked + label:before, .logon-body .user-gender .checkbox-group input:checked + label:before {
    background: #31b968
}

.home-body-box .user-gender .checkbox-group .ic-svg, .login-body .user-gender .checkbox-group .ic-svg, .logon-body .user-gender .checkbox-group .ic-svg {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 4px;
    width: 16px;
    height: 16px
}

.login-body .form-wrapper, .logon-body .form-wrapper {
    width: 300px;
    margin-right: 52px;
    margin-left: 38px
}

.login-body .login-tabs {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 93px;
    height: 93px
}

.login-body .login-tabs .tab-bg {
    display: inline-block;
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #31b968
}

.login-body .login-tabs .tab-item {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 13px;
    display: none
}

.login-body .login-tabs .tab-item.active {
    display: inline-block
}

.login-body .login-tabs .tab-item .ic-svg {
    width: 40px;
    height: 40px
}

.login-body .wechat-login .login-wechat-qr {
    width: 150px;
    height: 150px;
    margin: 15px 0 35px;
    padding: 5px;
    border: 1px solid #eee
}

.login-body .wechat-login .login-wechat-qr img {
    width: 100%;
    height: 100%
}

.logon-body .logon-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 300px;
    margin-bottom: 30px;
    margin-left: 38px
}

.logon-body .logon-tabs .tab-item {
    display: inline-block;
    float: left;
    width: 50%;
    max-width: 50%;
    padding-bottom: 9px;
    text-align: center;
    border-bottom: 1px solid #eee;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.logon-body .logon-tabs .tab-item.active {
    color: #31b968;
    border-bottom-color: #31b968
}

.logon-body .logon-tabs .tab-item.active .ic-phone {
    background-image: url(../imgs/icon/ic-phone-green.svg)
}

.logon-body .logon-tabs .tab-item.active .ic-mail {
    background-image: url(../imgs/icon/ic-mail-green.svg)
}

.logon-body .logon-tabs .ic-svg {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: sub
}

#mailFemale:checked + label:before, #phone-female:checked + label:before {
    background: #e957fb
}

.logon-succuss .ic-svg {
    width: 100px;
    height: 100px
}

.succuss-tips {
    margin-bottom: 20px
}

.succuss-tips .succuss-title {
    font-size: 1.875rem;
    padding: 0;
    color: #31b968;
    border: none;
    border-radius: 0
}

.succuss-tips .succuss-title:not(:disabled):hover {
    color: #3bc372
}

.interest h2 {
    font-size: 1.125rem;
    font-weight: 200
}

.interest-list a img {
    color: #ccc
}

.interest-list .interest-item {
    min-width: 33.3%;
    padding: 0 10px 40px 0
}

.interest-list .interest-item .user-img {
    display: block;
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.interest-list .interest-item .user-img img {
    width: 100%;
    height: 100%
}

.interest-list .interest-item .btn {
    font-size: .75rem;
    display: block;
    margin-top: 8px;
    padding: .2rem 0;
    text-align: center
}

.interest-list .interest-item .btn.followed {
    color: #999;
    background: #f2f2f2
}

.interest-list .interest-item .user-info {
    margin-left: 15px
}

.interest-list .interest-item .user-info a {
    color: #666
}

.interest-list .interest-item .user-info span {
    display: block
}

.interest-list .interest-item .user-info .name {
    font-size: 1rem;
    font-weight: 500;
    color: #4a4a4a
}

.interest-list .interest-item .user-info .company {
    font-size: .875rem;
    color: #999
}

.succuss-text {
    width: 80%;
    margin: auto;
    padding-top: 40px
}

.succuss-text div {
    font-size: 1.25rem
}

.succuss-text .tips-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 20px;
    margin-left: 15px
}

.succuss-text .tips-text dd {
    margin: 0
}

.home-body-box {
    width: 500px
}

.home-body-box .title {
    font-size: 1.375rem;
    margin-bottom: 15px;
    text-align: center
}

.home-body-box .reset-box {
    height: 90%
}

.home-body-box .form-wrapper {
    width: 300px;
    margin: auto
}

.change-email-body .btn-go-login {
    display: inline-block;
    margin-top: 20px
}

.openid-body {
    height: 550px
}

.openid-body .user-gender {
    padding: 0
}

.home-footer {
    font-size: .875rem;
    line-height: 2;
    width: 100%;
    margin: 5.5vh 0;
    text-align: center;
    color: #fff
}

.home-footer a:not([class]) {
    color: #fff
}

.home-footer a {
    margin: 0 2px
}

.home-footer > div {
    display: inline-block;
    margin: 0 auto;
    text-align: left
}

.osc-checkbox-accept-term {
    font-size: 1rem;
    line-height: 15px;
    position: relative;
    display: inline-block;
    min-width: 17px;
    min-height: 17px;
    vertical-align: middle;
    outline: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.osc-checkbox-accept-term .accept_term {
    width: 15px !important
}

.osc-checkbox-accept-term .label:after, .osc-checkbox-accept-term .label:before {
    font-family: Checkbox;
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px
}

.osc-checkbox-accept-term .label {
    font-size: 14px;
    min-width: 90px;
    text-align: right;
    color: #666
}

.osc-checkbox-accept-term .label:before {
    line-height: 1;
    content: '';
    -webkit-transition: background-color .3s ease, border .3s ease, box-shadow .3s ease;
    transition: background-color .3s ease, border .3s ease, box-shadow .3s ease;
    border: 1px solid #d4d4d5;
    border-radius: .25em;
    background: #fff
}

.osc-checkbox-accept-term .label:after {
    line-height: 17px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    text-align: center;
    opacity: 0;
    color: rgba(0, 0, 0, .8)
}